{extend name="property/public/insidePageBase" /}
{block name="title"}充电桩详情{/block}
{block name="body"}
<div class="layuimini-container">
    <div class="layuimini-main">
        <div class="layui-form  layui-form-pane">
            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                <ul class="layui-tab-title">
                    <li class="layui-this">订单记录</li>
                    <li>设备故障</li>
                    <li>设备日志</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <!--订单记录 add-->
                        <script type="text/html" id="toolOrderBar">
                            <div class="layui-btn-container">
                                {if $orderAddAuth}<button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="orderAdd"> 添加 </button> {/if}
                                {if $orderDelAuth} <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="orderDelete"> 删除 </button> {/if}
                            </div>
                        </script>
                        <table class="layui-hide" id="propertyPilesOrderList" lay-filter="propertyPilesOrderList"></table>
                        <script type="text/html" id="tableOrderBar">
                            <div class="layui-btn-group">
                                {if $orderEditAuth}<button type="button" class="layui-btn layui-btn-sm layui-btn-normal" lay-event="orderEdit">编辑</button>{/if}
                                {if $orderDelAuth}<button type="button" class="layui-btn layui-btn-sm layui-btn-danger" lay-event="orderDelete">删除</button>{/if}
                                {if $orderDetailAuth}<button type="button" class="layui-btn layui-btn-sm layui-btn-normal" lay-event="orderDetail">详情</button>{/if}
                                {if $orderRefundAuth}{{# if(d.pay_status == 1) { }}<button type="button" class="layui-btn layui-btn-sm layui-btn-normal" lay-event="orderRefund">退款</button>{{# } }}{/if}
                            </div>
                        </script>
                        <!--订单记录 end-->
                    </div>
                    <div class="layui-tab-item">
                        <!--设备故障 add-->
                        <script type="text/html" id="toolFaultyBar">
                            <div class="layui-btn-container">
                                {if $delFaultyAuth}
                                <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="deleteFaulty"> 删除 </button>
                                {/if}
                            </div>
                        </script>

                        <table class="layui-hide" id="propertyPilesFaultyLogList" lay-filter="propertyPilesFaultyLogList"></table>
                        
                        <script type="text/html" id="tableFaultyBar">
                            <div class="layui-btn-group">
                                {{# if(d.status == 0) { }}
                                {if $handleFaultyAuth} <a class="layui-btn layui-btn-normal layui-btn-sm data-count-edit" lay-event="editFaulty">编辑</a>{/if}
                                {{# } }}
                                {if $delFaultyAuth}<a class="layui-btn layui-btn-sm layui-btn-danger data-count-delete" lay-event="deleteFaulty">删除</a>{/if}
                            </div>
                        </script>
                        <!--设备故障 end-->
                    </div>
                    <div class="layui-tab-item">

                        <table class="layui-hide" id="propertyPilesLogList" lay-filter="propertyPilesLogList"></table>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/html" id="port_no_tpl">
        {{# if(d.port_no > 0) { }}
        <span class="layui-badge layui-bg-blue">{{d.port_no}} 号</span>
        {{# }else{ }}
        <span>未指定</span>
        {{# } }}
    </script>
        
    <script type="text/html" id="order_no_tpl">
        {{# if(d.order_no){ }}
        <span>{{ d.order_no }}</span>
        {{# } else { }}
            <span>--</span>
        {{# } }}
    </script>

    <script type="text/html" id="nickname_tpl">
        {{# if(d.nickname){ }}
        <span>{{ d.nickname }}</span>
        {{# } else { }}
            <span>--</span>
        {{# } }}
    </script>

    <script type="text/html" id="actual_power_tpl">
        {{# if(d.actual_power){ }}
        <span>{{ d.actual_power }}</span>
        {{# } else { }}
        <span>--</span>
        {{# } }}
    </script>

    <script type="text/html" id="order_status_tpl">
        {{# if(d.status === 0) { }}
        <span class="layui-badge layui-bg-black">未付款</span>
        {{# } else if(d.status === 1) { }}
        <span class="layui-badge layui-bg-cyan">付款未充电</span>
        {{# } else if(d.status === 2) { }}
        <span class="layui-badge layui-bg-blue">充电中</span>
        {{# } else if(d.status === 3) { }}
        <span class="layui-badge layui-bg-green">正常充电结束</span>
        {{# } else if(d.status === 4) { }}
        <span class="layui-badge layui-bg-orange">异常结束</span>
        {{# } else if(d.status === 5) { }}
        <span class="layui-badge layui-bg-orange">叠加结束</span>
        {{# } else if(d.status === -1) { }}
        <span class="layui-badge layui-bg-gray">已取消</span>
        {{# } else { }}
        <span>--</span>
        {{# } }}
    </script>
        
    <script type="text/html" id="end_remark_tpl">
        {{# if(d.end_remark){ }}
        <span>{{ d.end_remark }}</span>
        {{# } else { }}
            <span>--</span>
        {{# } }}
    </script>
    <script id="qrcodeTpl" type="text/html">
        <div style="text-align: center;" id="print_html">
            <img src="/qrcode/get?text={{d.linkUrl}}" style="width: 100%;">
            <div style="font-size: 25px;font-weight: bold;margin-top: 20px;">{{d.code_no}}{{# if(d.port_no > 0) {}}【端口{{d.port_no}}】{{# } }}</div>
        </div>
    </script>

    <script type="text/html" id="user_id_let">
        {{# if(d.user_id) { }}
        <span>用户</span>
        {{# } else { }}
        <span>手动</span>
        {{# } }}
    </script>

    <script type="text/html" id="status_let">
        {{# if(d.status === 0) { }}
        <span>待处理</span>
        {{# } }}
        {{# if(d.status === 1) { }}
        <span>已处理</span>
        {{# } }}
        {{# if(d.status === 2) { }}
        <span>已忽略</span>
        {{# } }}
    </script>
</div>
{/block}
{block name="js"}
{__block__}
{js href="/static/property/js/jQuery.print.js" /}
<script>
    layui.use(['form', 'layer', 'table','upload','laytpl'], function () {
        var form = layui.form,layer = layui.layer,   $ = layui.$, table = layui.table, laytpl = layui.laytpl;
        //订单列表
        var tablePilesOrderId = 'propertyPilesOrderList';
        table.render({
            elem: '#'+tablePilesOrderId,
            id:tablePilesOrderId,
            url: '{:url("propertyPilesOrderList")}?piles_id={:request()->get('piles_id')}',
            toolbar: '#toolOrderBar',
            totalRow: true,
            cols: [[
                {type: "checkbox", width: 50},
                {field: 'order_no', width: 190, title: '订单编号', sort: true,templet: '#order_no_tpl', totalRowText: '合计'},
                {field: 'port_no', width: 80, title: '端口', sort: true},
                {field: 'pay_price', width: 108, title: '支付金额', sort: true, totalRow: true},
                {field: 'actual_amount', width: 108, title: '消费金额', sort: true, totalRow: true},
                {field: 'status', width: 105,title: '订单状态',templet: '#order_status_tpl'},
                {field: 'add_time', width: 168,title: '创建时间', sort: true}
                {if $orderEditAuth || $orderDelAuth || $orderDetailAuth || $orderRefundAuth}
                , {title: '操作', minWidth:120, toolbar: '#tableOrderBar', fixed:'right'}
                {/if}
            ]],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 15,
            page: true,
            height: 'full-120'
        });
        
        /**
            * toolbar监听事件
            */
            table.on('toolbar('+tablePilesOrderId+')', function (obj) {
            if (obj.event === 'orderAdd') {  // 监听添加操作
                var url = '{:url("propertyPilesOrderAdd")}?piles_id={:request()->get('piles_id')}';
                var index = layer.open({title: '添加充电桩订单', type: 2, shade: 0.2,maxmin:true, area: ['60%', '60%'], content: url, btnAlign: 'c', btn: ['确定', '取消'], yes: function (index, layero) {
                        var iframeWindow = window['layui-layer-iframe' + index], submit = layero.find('iframe').contents().find("#submitBtn");
                        iframeWindow.layui.form.on('submit(submitBtn)', function (data) {
                            var field = data.field; //获取提交的字段
                            var loadAdd = layer.msg('提交中', {icon: 16, time: 0, shade: 0.1, offset: '15px'});
                            $.post(url, field, function (res) {
                                layer.close(loadAdd);
                                if (res.code === 0) {
                                    table.reload(tablePilesOrderId); //数据刷新
                                    layer.close(index); //关闭弹层
                                    layer.msg(res.msg, {icon: 6, offset: '15px'});
                                } else {
                                    layer.msg(res.msg, {icon: 5, offset: '15px'});
                                }
                            });
                        });
                        submit.trigger('click');
                    }
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
            } else if (obj.event === 'orderDelete') {  // 监听删除操作
                var checkStatus = table.checkStatus(obj.config.id),data = checkStatus.data;
                var data = checkStatus.data, id = [];
                for (elem in data) {
                    id.push(data[elem].id);
                }
                if (id.length === 0) {
                    return layer.msg('请选择要删除的数据');
                }
                var url = '{:url("propertyPilesOrderDel")}';
                layer.confirm('删除后不可恢复！  是否确认? ', {icon: 3}, function () {
                    var loadAdd = layer.msg('提交中', {icon: 16, time: 0, shade: 0.1, offset: '15px'});
                    $.post(url, {ids: id}, function (res) {
                        layer.close(loadAdd);
                        if (res.code === 0) {
                            table.reload(tablePilesOrderId); //数据刷新
                            layer.msg(res.msg, {icon: 6, offset: '15px'});
                        } else {
                            layer.msg(res.msg, {icon: 5, offset: '15px'});
                        }
                    });
                });
            }
        });

        table.on('tool('+tablePilesOrderId+')', function (obj) {
            var data = obj.data;
            if (obj.event === 'orderEdit') {
                var url = '{:url("propertyPilesOrderEdit")}?id='+data.id;
                var index = layer.open({
                    title: '编辑充电桩订单', type: 2,  shade: 0.2, maxmin:true, area: ['60%', '60%'],content: url, btnAlign: 'c', btn: ['确定', '取消'], yes: function (index, layero) {
                        var iframeWindow = window['layui-layer-iframe' + index], submit = layero.find('iframe').contents().find("#submitBtn");
                        iframeWindow.layui.form.on('submit(submitBtn)', function (data) {
                            var field = data.field; //获取提交的字段
                            var loadAdd = layer.msg('提交中', {icon: 16, time: 0, shade: 0.1, offset: '15px'});
                            $.post(url, field, function (res) {
                                layer.close(loadAdd);
                                if (res.code === 0) {
                                    table.reload(tablePilesOrderId); //数据刷新
                                    layer.close(index); //关闭弹层
                                    layer.msg(res.msg, {icon: 6, offset: '15px'});
                                } else {
                                    layer.msg(res.msg, {icon: 5, offset: '15px'});
                                }
                            });
                        });
                        submit.trigger('click');
                    }
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
                return false;
            } else if (obj.event === 'orderDelete') {
                var url = '{:url("propertyPilesOrderDel")}';
                layer.confirm('删除后不可恢复！  是否确认? ', {icon: 3}, function () {
                    var loadAdd = layer.msg('提交中', {icon: 16, time: 0, shade: 0.1, offset: '15px'});
                    $.post(url, {ids: [data.id]}, function (res) {
                        layer.close(loadAdd);
                        if (res.code === 0) {
                            table.reload(tablePilesOrderId); //数据刷新
                            layer.msg(res.msg, {icon: 6, offset: '15px'});
                        } else {
                            layer.msg(res.msg, {icon: 5, offset: '15px'});
                        }
                    });
                });
            } else if (obj.event === 'orderDetail') {
                var url = '{:url("propertyPilesOrderDetail")}?id='+data.id;
                var index = layer.open({ title: '订单详情',  type: 2,   shade: 0.2,  maxmin:true,  area: ['45%', '65%'],content: url,  btnAlign: 'c',  btn: ['确定', '取消']  });
                $(window).on("resize", function () {
                    layer.full(index);
                });
                return false;
            } else if (obj.event === 'orderRefund') {
                var url = '{:url("propertyPilesOrderRefund")}?id='+data.id;
                var index = layer.open({title: '退款',  type: 2,    shade: 0.2,  maxmin:true,  area: ['35%', '45%'], content: url,   btnAlign: 'c',    btn: ['确定', '取消'],
                    yes: function (index, layero) {
                        var iframeWindow = window['layui-layer-iframe' + index], 
                        submit = layero.find('iframe').contents().find("#submitBtn");
                        iframeWindow.layui.form.on('submit(submitBtn)', function (data) {
                            var field = data.field; //获取提交的字段
                            var loadAdd = layer.msg('提交中', {icon: 16, time: 0, shade: 0.1, offset: '15px'});
                            $.post(url, field, function (res) {
                                layer.close(loadAdd);
                                if (res.code === 0) {
                                    table.reload(tablePilesOrderId); //数据刷新
                                    layer.close(index); //关闭弹层
                                    layer.msg(res.msg, {icon: 6, offset: '15px'});
                                } else {
                                    layer.msg(res.msg, {icon: 5, offset: '15px'});
                                }
                            });
                        });
                        submit.trigger('click');
                    }
                });
                return false;
            }
        });


        // 设备故障
        var tableFaultyId = 'propertyPilesFaultyLogList';
        table.render({
            elem: '#'+tableFaultyId,
            id:tableFaultyId,
            url: '{:url("propertyPilesFaultyLogList")}?piles_id={:request()->get('piles_id')}',
            toolbar: '#toolFaultyBar',
            cols: [[
                {type: "checkbox", width: 50},
                {field: 'device_sn', width: 150, title: '设备编号'},
                {field: 'port_num', width: 150, title: '插座号'},
                {field: 'fault_code', width: 150, title: '故障码'},
                {field: 'fault_msg', width: 150, title: '故障说明'},
                {field: 'user_id', width: 120, title: '区分', templet: '#user_id_let'},
                {field: 'status', width: 100, title: '状态', templet: '#status_let'},
                {field: 'add_time', width: 168,title: '创建时间', sort: true}
                {if $handleFaultyAuth || $delFaultyAuth}
                    ,{title: '操作', width:200, toolbar: '#tableFaultyBar', fixed:'right'}
                {/if}
            ]],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 15,
            page: true,
            height: 'full-120'
        });

        /**
         * toolbar监听事件
         */
        table.on('toolbar('+tableFaultyId+')', function (obj) {
            if (obj.event === 'deleteFaulty') {  // 监听删除操作
                var checkStatus = table.checkStatus(obj.config.id),data = checkStatus.data;
                var data = checkStatus.data, id = [];
                for (elem in data) {
                    id.push(data[elem].id);
                }
                if (id.length === 0) {
                    return layer.msg('请选择要删除的数据');
                }
                var url = '{:url("propertyPilesFaultyLogDel")}';
                layer.confirm('删除后不可恢复！  是否确认? ', {icon: 3}, function () {
                    var loadAdd = layer.msg('提交中', {icon: 16, time: 0, shade: 0.1, offset: '15px'});
                    $.post(url, {ids: id}, function (res) {
                        layer.close(loadAdd);
                        if (res.code === 0) {
                            table.reload(tableFaultyId); //数据刷新
                            layer.msg(res.msg, {icon: 6, offset: '15px'});
                        } else {
                            layer.msg(res.msg, {icon: 5, offset: '15px'});
                        }
                    });
                });
            }
        });

        table.on('tool('+tableFaultyId+')', function (obj) {
            var data = obj.data;
            if (obj.event === 'editFaulty') {
                var url = '{:url("propertyPilesFaultyLogHandle")}?id='+data.id;
                var index = layer.open({
                    title: '处理设备', type: 2,  shade: 0.2, maxmin:true, area: ['35%', '55%'],content: url, btnAlign: 'c', btn: ['确定', '取消'], yes: function (index, layero) {
                        var iframeWindow = window['layui-layer-iframe' + index], submit = layero.find('iframe').contents().find("#submitBtn");
                        iframeWindow.layui.form.on('submit(submitBtn)', function (data) {
                            var field = data.field; //获取提交的字段
                            var loadAdd = layer.msg('提交中', {icon: 16, time: 0, shade: 0.1, offset: '15px'});
                            $.post(url, field, function (res) {
                                layer.close(loadAdd);
                                if (res.code === 0) {
                                    table.reload(tableFaultyId); //数据刷新
                                    layer.close(index); //关闭弹层
                                    layer.msg(res.msg, {icon: 6, offset: '15px'});
                                } else {
                                    layer.msg(res.msg, {icon: 5, offset: '15px'});
                                }
                            });
                        });
                        submit.trigger('click');
                    }
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
                return false;
            } else if (obj.event === 'deleteFaulty') {
                var url = '{:url("propertyPilesFaultyLogDel")}';
                layer.confirm('删除后不可恢复！  是否确认? ', {icon: 3}, function () {
                    var loadAdd = layer.msg('提交中', {icon: 16, time: 0, shade: 0.1, offset: '15px'});
                    $.post(url, {ids: [data.id]}, function (res) {
                        layer.close(loadAdd);
                        if (res.code === 0) {
                            table.reload(tableFaultyId); //数据刷新
                            layer.msg(res.msg, {icon: 6, offset: '15px'});
                        } else {
                            layer.msg(res.msg, {icon: 5, offset: '15px'});
                        }
                    });
                });
            }
        });

        var tablePilesLogId = 'propertyPilesLogList';
        table.render({
            elem: '#'+tablePilesLogId,
            id:tablePilesLogId,
            url: '{:url("propertyPilesBasicLog")}?piles_id={:request()->get('piles_id')}',
            cols: [[
                {type: "checkbox", width: 50},
                {field: 'add_time', width: 168,title: '创建时间', sort: true},
                {field: 'remark', minWidth: 150, title: '备注说明'},
            ]],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 15,
            page: true,
            height: 'full-120'
        });

    });
</script>
{/block}